<template>
  <div class="vue-container">
    <div v-if="data.enable" v-loading="loading">
      <iframe ref="myIframe" :src="data.url" class="doc-class" frameborder="0" />
    </div>
    <el-result v-else icon="error" title="错误提示" sub-title="接口文档未启用" class="doc-all" />
  </div>
</template>
<script>
import { detail } from '@/api/dev/doc'
export default {
  name: 'Doc',
  data() {
    return {
      loading: false,
      data: {
        enable: true // 必须定义为true 否则无法获取iframe的ref
      }
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    // 获取文档详情
    getDetail() {
      detail().then(res => {
        this.data = res.data
        if (this.data.enable) {
          this.loadIframe()
        }
      })
    },
    // 加载iframe
    loadIframe() {
      this.loading = true
      const iframe = this.$refs.myIframe
      // 兼容处理
      if (iframe.attachEvent) {
        // IE
        iframe.attachEvent('onload', () => {
          this.loading = false
        })
      } else {
        // 非IE
        iframe.onload = () => {
          this.loading = false
        }
      }
    }
  }
}
</script>
<style scoped lang="scss">
.doc-all {
  height: 80vh;
}
.doc-class {
  width: 100%;
  height: 100vh;
  padding: 20px;
}
</style>
